<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网登录</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon"/>
<link href="css/login.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<style>

</style>
</head>

<body>
<header>
	<a href="index.html" target="_blank"><img src="images/logo.png" alt="logo" title="点击进入零食网" /></a>
</header>

<article id="app">
	<div class="loginarea">
    	<div class="item">
        	<h1>源辰会员 <a href="register.html">立即注册</a></h1>
        </div>
        
        <div class="item item-border">
        	<label for="account" class="login_label"></label>
            <input type="text" class="ipt" name="account" id="account" placeholder="邮箱/用户名/已验证的手机"
            	v-model ="account" @blur="checkInfo(0)" @focus="clearMsg"/>
            <span class="clear_btn"></span>
        </div>
        
        <div class="item item-border">
        	<label for="pwd" class="login_label pwd_label"></label>
            <input type="password" maxlength="18" class="ipt" name="pwd" id="pwd" placeholder="密码"
           		v-model ="pwd" @blur="checkInfo(1)" @focus="clearMsg"/>
            <span class="clear_btn"></span>
        </div>
        
         <div class="item item-border">
        	<label for="code" class="login_label pwd_label"></label>
            <input type="text" maxlength="4" class="ipt1" name="code" id="code" placeholder="验证码"
           		v-model ="code" @blur="checkInfo(2)" @focus="clearMsg"/>
            <img class="code" src="code" onclick="this.src='code?d=' + new Date()">
        </div>
        
        <div class="item item2">
        	<input type="checkbox" id="auto">
        	<label for="auto">自动登录</label>
          	<a href="#">忘记密码</a>
        </div>
        
        <div class="item">
          	<a href="javascript:void(0)" class="btn_img" @click="login()">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</a>
        </div>
        
        <div class="item item3">
          	<ul>
            	<li><a href="#"><span></span>QQ</a></li>
                <li><span></span></li>
                <li><a href="#"><span></span>微信</a></li>
                <li><span style="color: red">{{info}}</span></li>
            </ul>
        </div>
    </div>
</article>
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

	<!-- 依次引入相关JS文件 -->
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/axios.js"></script>
	<script type="text/javascript" src="js/qs.js"></script>

	<script type="text/javascript">
		//构建Vue实例
		let vm = new Vue({
			el : "#app",
			data : {
				account : "",
				pwd : "",
				code : "",
				status:[false, false, false], //账户 密码 验证码 格式标记
				info : "",
			},
			//此时Vue实例初始化完成 DOM挂载完成 可以直接操作DOM
			methods : {
				checkInfo( flag ){
					let correct = false; //默认标识
					switch(flag){
						case 0:  //说明是账号验证
							let reg1 = /^1[3-9]\d{9}$/; //手机号码    /^1(3|4|5|6|7|8|9)\d{9}$/
							let reg2 = /^[\u4e00-\u9fff\w]{2,16}$/;//匹配所有中日韩非符号字符
							let reg3 = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;//验证邮箱格式
							//验证正则表达式
							if( !(reg1.test( this.account) || reg2.test( this.account) || reg3.test( this.account))){ //验证失败
								this.info="账号格式错误，请重新输入";
								this.account = "";
								correct = false;
							}else{
								correct = true;
							}
							break;
						case 1: //验证密码
							let reg4 = /^[\w@!%]{6,15}$/;  //switch 变量不能重复
							if( !(reg4.test(this.pwd))){
								this.info="密码格式错误，请重新输入";
								this.pwd = "";
								correct = false;
							}else{
								correct = true;
							}
							break;
						case 2: //验证码
							let reg5 = /^\w{4}$/;
							if( !(reg5.test(this.code))){
								this.info="验证码格式错误，请重新输入";
								this.code = "";
								correct = false;
							}else{
								correct = true;
							}
							break;
					default:
						this.info="验证失败，请重新输入";
					}
					//vue修改数据
					Vue.set(this.status, flag, correct); //vm.$set
				},		
				clearMsg(){ //清空提示
					this.info="";
				},
				login : function() { //登录事件@click="login"
					console.log(this.status);
				if( $.inArray( false, this.status) > 0){//只要一下项没通过 就无法进行登录
					this.info="宁输入的信息有误，请重新输入";
					return;
				}

				//登录请求
				axios.post( "mem/login", qs.stringify({nickName: this.account, pwd: this.pwd, realName: this.code})).then(result =>{
					if( !result.status == 200){ //请求不成功
						this.info ='请求失败请检查您的网络';
					 	return;
					}
					
					if(result.data.code == 200){  //登录成功
						//获取来源地址 即 ： 哪个页面连接过来将来登录成功直接返回该页面
						let temp = document.referrer;
					
						if( "" == temp || temp.indexOf( "register.html")){
							location.href = "index.html";
							return;
						}
						location.href = temp;
						return;
					}
					if(result.data.code == 503){ 
						this.info ='验证码错误，请重新输入';
					}
					if(result.data.code == 500){ 
						this.info ='账号或密码错误，请确认后重新输入';
					}
					this.status =[false, false, false];
					})
				}
			}
		})

</script> 

<!-- 
<script type="text/javascript">
function login(){
	//模拟登录测试
	let code = $("#code").val(); //验证码
	$.post("mem/login", {nickName:"navy", pwd:"123321", realName: code}, data=>{
		if( data.code == 200){
			location.href = 'index.html';
		}
	},'json')
}
		
</script> 
 -->
</body>
</html>
